import React from "react";
import {
  Link, withRouter

} from "react-router-dom";

import { List ,Divider} from 'antd';
import staffCss from './staff.module.css'

class History extends React.Component {
  state = {
    totalTime: '',//总时长
    usedTime: '',
    data: [{
      membersId: [],//选择成员id
      duration: 0,
      playDate: '',
      siteNum: 0,
      userId: '',
      approval: '',//是否审批通过
      createTime: '',//创建时间
      remark: ''//备注
    }]

  }
  componentDidMount () {
    this.getUserInfo()
  }


  getUserInfo = () => {

    this.$axios({
      method: 'post',
      // url: `/wx/portal/myList?operType=0&userId=01012000`,
      url: `/wx/portal/myList?operType=0`,
    }).then(res => {
      console.log(res, '后端返回数据')
      if (res.data.code === 0) {
        this.setState({
          data: res.data.data,
          totalTime: res.data.data[0].sysDuration,
          usedTime: res.data.data[0].useDuration
        })
      }

    }).catch(function (error) {
      console.log(error);
    })

  }
  goback = () => {
    this.props.history.goBack()
  }

  render () {
    const { totalTime, usedTime, data } = this.state

    return (

      <div className={staffCss.history}>
        {/* <div  onClick={this.goback}>
        <svg t="1627520711747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="30" height="30"><path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667z m-324.693333 373.013334l174.464-174.485334a21.141333 21.141333 0 0 0-0.192-29.973333 21.141333 21.141333 0 0 0-29.973334-0.192l-208.256 208.256a20.821333 20.821333 0 0 0-6.122666 14.976c0.042667 5.418667 2.133333 10.837333 6.314666 14.997333l211.178667 211.2a21.141333 21.141333 0 0 0 29.973333 0.213334 21.141333 21.141333 0 0 0-0.213333-29.973334l-172.629333-172.629333 374.997333 2.602667a20.693333 20.693333 0 0 0 21.034667-21.034667 21.482667 21.482667 0 0 0-21.333334-21.333333l-379.242666-2.624z" fill="#3D3D3D" p-id="1948"></path></svg>
        </div> */}
        <div className={staffCss.totalTime}>
          <div className={staffCss.spacebetween}>
            <div style={{ fontWeight: 'bold' }}>总时长:</div>
            <div style={{ fontWeight: 'bold' }}> {totalTime}小时</div>
          </div>
          <div className={staffCss.spacebetween}>
            <div style={{ fontWeight: 'bold' }}>已用时长:</div>
            <div style={{ fontWeight: 'bold' }}> {usedTime}小时</div>
          </div>
          <div className={staffCss.spacebetween}>
            <div style={{ fontWeight: 'bold' }}>可用时长:</div>
            <div style={{ fontWeight: 'bold' }}> {totalTime - usedTime}小时</div>
          </div>
        </div>
        <Divider orientation="center"></Divider>
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <List.Item
              actions={[<Link to={{ pathname: "/detail", state: { detail: item } }}>查看详情</Link>]}>
              <List.Item.Meta
                title={<Link to={{ pathname: "/detail", state: { detail: item } }}>申请编号:{item.applyId}</Link>}
                description={<div >
                  <div  >打球日期:{item.playDate.slice(0, 11)}</div>
                  <div style={{ display: "flex" }}>
                    审批状态:{item.approval === "1" ? <div>审批通过</div> : <div>审批中</div>}
                  </div>
                </div>
                }
              />
            </List.Item>
          )}
        />
      </div>

    );
  }
}



export default withRouter(History)

